<style>
.treeList {
  line-height: 40px;
  font-size: 14px;
  overflow: hidden;
}
.parentTree {
  position: relative;
}
.closeli {
  position: absolute;
  right: 10px;
  top: 0;
}
.treeList .mui-icon-checkmarkempty {
  color: #3498fe;
  font-size: 30px;
}
</style>
<template>
  <li class="treeList">
    <div :style="style">
 
      <div class="parentTree">
        <span @click="nodeClick(node)">{{node.entityTitle}}</span>
        <span class="mui-icon" :class="node.isChecked?'mui-icon-checkmarkempty':''"></span>
        <div v-if="node.children && node.children.length > 0" class="closeli">
          <span @click="changeStatus(node)" class="mui-icon" :class="node.close?'mui-icon-arrowdown':'mui-icon-arrowup'"></span>
          <!-- <i  @click="changeStatus(node)" v-else>折叠</i> -->
        </div>
      </div>
 
    </div>
    <tree-node @push="push" @remove="remove" v-show="!node.close" :level="level+2" :ref="'children'+index" :key="index" v-for="(item,index) in node.children" :node="item"></tree-node>
  </li>
</template>
<script>
import linq from 'linq'
export default {
  data: function () {
    return {
      style: {
        paddingLeft: '',
        borderBottom: '1px solid #dedede'
      },
      vals: []
    }
  },
  props: ['node', 'ids', 'level'],
  methods: {
    // 展开状态变更
    changeStatus: function (node) {
      if (node) {
        if (node.close) {
          node.close = false
        } else {
          node.close = true
        }
      }
    },
    // 递归设置子节点的状态
    setChildrensRole: function (node, val) {
      var that = this
      if (node.children !== null && node.children.length > 0) {
        node.children.forEach(function (item, index) {
          item.isChecked = val
          if (item.children !== null) {
            that.setChildrensRole(item, val)
          }
        })
      }
    },
    nodeClick: function (node) {
      node.isChecked = !node.isChecked
      this.setChildrensRole(node, node.isChecked)
    },
    removeItem: function (val) {
      let index = linq.from(this.vals).indexOf(val)
      this.vals = this.vals.splice(index, 1, 0)
      console.log(this.vals)
    },
    push: function (val) {
      this.$emit('push', val)
    },
    remove: function (val) {
      console.log(val)
      this.$emit('remove', val)
    }
  },
  watch: {
    node: function () {
      this.$set(this.node, 'close', true)
      this.$set(this.node, 'isChecked', false)
    },
    'node.isChecked': function (val) {
      if (this.node.children && this.node.children.length === 0) {
        if (val) {
          this.$emit('push', { id: this.node.entityCode, text: this.node.entityTitle })
        } else {
          this.$emit('remove', { id: this.node.entityCode, text: this.node.entityTitle })
        }
      }
    }
  },
  created: function () {
    this.$set(this.node, 'close', true)
    this.$set(this.node, 'isChecked', false)
    if (!this.level) {
      this.level = 0
    }
    this.style.paddingLeft = (this.level * 10) + 'px'
  },
  components: {
    TreeNode: resolve => require(['./treeNode.vue'], resolve)
  },
}
</script>